<template>
  <div class="operation-box" :style="boxstyle">
    <!-- 1.三角形 -->
    <div class="operation-triangle" :style="trianglestyle"></div>
    <!-- 2.真实box -->
    <div class="operation-rectangle" :style="rectanglestyle">
      <ul>
        <li @click.stop="toReport">举报</li>
        <li @click.stop="shield">屏蔽此人</li>
      </ul>
    </div>
    <van-overlay :show="show" z-index="10" @click.stop="closeBox" />
  </div>
</template>

<script>
export default {
  name: "topic-operate",
  props: ["direction"],
  data() {
    return {
      show: true,
      boxstyle: {
        top: "30px",
      },
      trianglestyle: {
        top: "-10px",
        "border-top": "10px solid #00000000",
        "border-bottom": "10px solid rgba(0, 0, 0, 0.7)",
      },
      rectanglestyle: {
        top: "10px",
      },
    };
  },
  methods: {
    toReport() {
      this.$router.push({
        path: "/report",
        query: { topic: this.$parent.topic.id },
      });
    },
    // 屏蔽
    shield() {},
    closeBox() {
      this.show = false;
      this.$parent.operate_show = false;
    },
  },
  mounted() {
    if (this.direction === "bottom") {
      this.trianglestyle = {
        bottom: "-10px",
        "border-top": "10px solid rgba(0, 0, 0, 0.7)",
        "border-bottom": "10px solid #00000000",
      };
      this.rectanglestyle = {
        bottom: "10px",
      };
      this.boxstyle = {
        bottom: "30px",
      };
    }
  },
};
</script>

<style>
.operation-box {
  position: absolute;
  right: 10px;
}
.operation-triangle {
  height: 0px;
  width: 0px;
  border-left: 10px solid #00000000;
  border-right: 10px solid #00000000;
  position: absolute;
  right: 10px;
  z-index: 11;
}
.operation-rectangle {
  z-index: 11;
  width: 100px;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  right: 5px;
  border-radius: 5px;
}
.operation-rectangle ul {
  margin: 5px 0;
  padding: 0;
  color: #fafafad1;
  list-style: none;
}
.operation-rectangle ul li {
  padding: 5px 0;
}
.operation-box .van-overlay {
  background-color: rgba(0, 0, 0, 0);
}
</style>